<template>
	<view>
		<page-head headTitle="编辑资料" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<picture-upload class="m-t9" :image="image" @changeImg="changeImg"></picture-upload>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 letter-s3 width-1">昵称</text>
			<view class="flex align-center">
				<view class="flex address">
					<input class="flex fs-3 info white-space" type="text" v-model="userName"  style="text-align: right;" placeholder-class="text">
				</view>
				<image class="arrow" src="/static/images/icon_right_arrow.png"></image>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 letter-s3 width-1">性别</text>
			<view class="flex align-center" >
				<radio-group @change="radioChange" class="flex">
					<label  v-for="(item, index) in items" :key="item.value" ref="default">
						<view class="flex align-center ml">
							<radio style="transform:scale(0.7)" color="#ffeb0f"  :value="item.value" :checked="index === current" />
							<view class="fs-3">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 letter-s3 width-1">标签</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b">
			<textarea v-model="tags" class="border width bg-textarea  p-t-b4 p-l-r fs-3" placeholder-class="color-t"></textarea>
		</view>
		<bright-button @licekSubmit="licekSubmit" title="提交" class="m-t-b"></bright-button>
	</view>
</template>
<script>
import pageHead from '@/components/common/page-head.vue'
import brightButton from '@/components/common/bright-button.vue'
import pictureUpload from '@/components/common/picture-upload.vue'
	export default {
		components:{
			pageHead,
			brightButton,
			pictureUpload
		},
		data() {
			return {
				image:'/static/images/picture.png',
				userName:'昵称',
				items:[{
					value: '0',
                    name: '保密'
                },
				{
					value: '1',
				    name: '男'
				},
				{
					value: '2',
				    name: '女'
				}],
				current: 0,
				tags:''
			}
		},
		onLoad(){
			uni.getStorage({
			    key: 'userInfo',
			    success: (res)=> {
					let data = res.data;
					//判断是否已有头像，没有则使用默认的
					if(data.avatar==""){
						this.image = '/static/images/picture.png';
					}else{
						this.image = data.avatar;
					}
					//获取昵称
					this.userName = data.name;
					this.current = data.gender;
					//判断标签是否已填内容，没有则使用默认提示
					if(data.tags==""){
						this.tags="请输入个人标签,多个标签用空格隔开...";
					}else{
						this.tags = data.tags;
					}
			        //console.log(res.data);
			    }
			});
		},
		mounted(){
			this.$refs.default[0].$el.hidden=true;
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						//console.log(this.current);
						break;
					}
				}
			    },
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			changeImg(){
				var Token = uni.getStorageSync('token');
				console.log(Token);
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
						//获取图片路径
						//this.image = res.tempFilePaths[0];
						//console.log(res.tempFilePaths[0]);	
						uni.uploadFile({
							url:'http://175.24.68.5:9999/api/file/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'avatar'	
							},
							header: {
								'XX-Device-Type':'wxapp',
								'XX-Token': Token
							},
						    success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								if(data.code == 1){
									this.image = data.data.url;
								}
								console.log(data);
							}
						});	
				    }
				});
			
			},
			//修改资料提交
			licekSubmit(){
				this.$myRequest({
					method:'POST',
					url:'/api/user/modify',
					data:{
						avatar:this.image,
						nickname:this.userName,
						gender:this.current,
						tags:this.tags
					},
				}).then(res=>{
					console.log(res);
					//更新本地存储用户的数据
					uni.setStorage({
					    key: 'userInfo',
					    data:{
							name:this.userName,
					    	avatar:this.image,
					    	gender:this.current,
					    	tags:this.tags,
							is_guide:0,
							is_merchant:0
					    },
						//修改成功
					    success: function () {
					        uni.showToast({
					            title: '修改成功',
					            duration: 2000
					        });
						//5秒后返回到上一页
						setTimeout(function(){
							const pages = getCurrentPages() ;
							if(pages.length >1) {
								uni.navigateBack({
									delta: 1
								});
							}else{
								//返回上一页失败后强制回到首页
								uni.redirectTo({
									url: '../index/index'
								})
							}
						},5000);
							
					    }
					});
				})
			}
			
		}
	}
</script>

<style scoped>
.m-t-b{margin-top: 240rpx;margin-bottom: 60rpx;}
.address{width: 460rpx;justify-content:flex-end;}
.info{max-width: 400rpx;}
</style>

